<template>
  <div class="h-87">
    <!-- 高 636px  -->
    <div class="flex justify-between" style="height:48.29%">
      <div data-bottom class="second-sides">
        <page-header text="奶山羊存栏数量五年计划">
          <v-chart v-if="option1.isShow" :options="option1" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="奶山羊饲料需求量五年计划" :ph="330">
          <v-chart v-if="option2.isShow" :options="option2" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="良种奶山羊培育与改良五年计划" :ph="330">
          <v-chart v-if="option3.isShow" :options="option3" />
        </page-header>
      </div>
    </div>
    <!-- 高 20px -->
    <div style="height:1.5%" />
    <!-- 高 607px -->
    <div class="flex justify-between" style="height:48.29%">
      <div data-bottom class="second-sides">
        <page-header text="奶山羊产奶量五年计划" :ph="330">
          <v-chart v-if="option4.isShow" :options="option4" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="奶山羊单产量五年计划 " :ph="330">
          <v-chart v-if="option5.isShow" :options="option5" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="奶山羊全产业链产值五年计划" :ph="330">
          <v-chart v-if="option6.isShow" :options="option6" />
        </page-header>
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from 'header/PageHeader.vue'
import YlCharts from '@/components/Charts/ylCharts.vue'
import echarts from 'echarts'
import { sheepInfo } from '@/api/connector'
import { getDataAndRefresh } from '@/utils/echartsRefresh'

export default {
  name: 'ProductivityLevel',
  // eslint-disable-next-line vue/no-unused-components
  components: { YlCharts, PageHeader },
  data() {
    return {
      option1: {
        isShow: false,
        legend: {
          data: ['总存栏', '产奶羊存栏'],
          x: 'right'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: '#5C6D7C',
              width: 1
            }
          },
          spiltLine: {
            show: true,
            lineStyle: {
              color: '#5C6D7C',
              width: 1
            }
          }
        },
        yAxis: [
          {
            name: '万只',
            nameTextStyle: {
              color: '#ffffff'
            },
            axisLine: {
              lineStyle: {
                color: '#485A6A'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#364C5B'],
                width: 1,
                type: 'solid'
              }
            }
          },
          {
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#485A6A'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#5C6D7C'
              }
            }

          }
        ],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '1.5%',
          containLabel: true
        },
        series: [
          {
            name: '总存栏',
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(0, 220, 255, 1)' },
                { offset: 1, color: 'rgba(0, 182, 255, 0)' }
              ])
            },
            data: []
          },
          {
            name: '产奶羊存栏',
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(156, 82, 255, 1)' },
                { offset: 1, color: 'rgba(156, 82, 255, 0)' }
              ])
            },
            data: []
          }

        ]
      },
      option2: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: '#5C6D7C',
              width: 1
            }
          },
          spiltLine: {
            show: true,
            lineStyle: {
              color: '#5C6D7C',
              width: 1
            }
          }
        },
        yAxis: [
          {
            name: '吨',
            nameTextStyle: {
              color: '#ffffff'
            },
            axisLine: {
              lineStyle: {
                color: '#485A6A'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#364C5B'],
                width: 1,
                type: 'solid'
              }
            }
          },
          {
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#485A6A'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#5C6D7C'
              }
            }

          }
        ],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '1.5%',
          containLabel: true
        },
        series: [
          {
            name: '需求量',
            type: 'bar',
            barMaxWidth: 15,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(24, 216, 177, 1)' },
                { offset: 1, color: 'rgba(24, 216, 177, 0)' }
              ])
            },
            data: []
          }

        ]
      },
      option3: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: '#5C6D7C',
              width: 1
            }
          },
          spiltLine: {
            show: true,
            lineStyle: {
              color: '#5C6D7C',
              width: 1
            }
          }
        },
        yAxis: [
          {
            name: '只',
            nameTextStyle: {
              color: '#ffffff'
            },
            axisLine: {
              lineStyle: {
                color: '#485A6A'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#364C5B'],
                width: 1,
                type: 'solid'
              }
            }
          },
          {
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#485A6A'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#5C6D7C'
              }
            }

          }
        ],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '1.5%',
          containLabel: true
        },
        series: [
          {
            name: '培育与改良',
            type: 'bar',
            barMaxWidth: 15,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(233, 208, 23, 1)' },
                { offset: 1, color: 'rgba(233, 208, 23, 0)' }
              ])
            },
            data: []
          }

        ]
      },
      option4: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            var result = params[0].name + '<br>'
            params.forEach(function(item) {
              result += item.marker + item.seriesName + ' : ' + item.value + ' 万吨</br>'
            })
            return result
          }
        },
        color: ['#72CAFF'],
        xAxis: {

          boundaryGap: false,
          data: [],
          axisLine: {
            lineStyle: {
              color: '#5C6D7C',
              width: 1
            }
          },
          spiltLine: {
            show: true,
            lineStyle: {
              color: '#5C6D7C',
              width: 1
            }
          }
        },
        grid: {
          x2: 22,
          y2: 30
        },
        yAxis: [
          {
            name: '万吨',
            nameTextStyle: {
              color: '#ffffff'
            },
            axisLine: {
              lineStyle: {
                color: '#485A6A'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#364C5B'],
                width: 1,
                type: 'solid'
              }
            }
          },
          {
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#485A6A'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#5C6D7C'
              }
            }

          }
        ],
        series: [
          {
            data: [],
            type: 'line',
            name: '产奶量',
            areaStyle: { normal: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: 'rgba(0, 220, 255, 1)' },

                  { offset: 1, color: 'rgba(0, 182, 255, 0)' }
                ]
              )
            }},
            lineStyle: {
              color: '#72CAFF'
            },
            symbol: 'none'
          }
        ]
      },
      option5: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            var result = params[0].name + '<br>'
            params.forEach(function(item) {
              result += item.marker + item.seriesName + ' : ' + item.value + ' 千克</br>'
            })
            return result
          }
        },
        color: ['#6647FF'],
        xAxis: {

          boundaryGap: false,
          data: [],
          axisLine: {
            lineStyle: {
              color: '#5C6D7C',
              width: 1
            }
          },
          spiltLine: {
            show: true,
            lineStyle: {
              color: '#5C6D7C',
              width: 1
            }
          }
        },
        grid: {
          x2: 22,
          y2: 30
        },
        yAxis: [
          {
            name: '千克',
            nameTextStyle: {
              color: '#ffffff'
            },
            axisLine: {
              lineStyle: {
                color: '#485A6A'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#364C5B'],
                width: 1,
                type: 'solid'
              }
            }
          },
          {
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#485A6A'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#5C6D7C'
              }
            }

          }
        ],
        series: [
          {
            data: [],
            type: 'line',
            name: '单产量',
            areaStyle: { normal: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: 'rgba(156, 82, 255, 1)' },

                  { offset: 1, color: 'rgba(156, 82, 255, 0)' }
                ]
              )
            }},
            lineStyle: {
              color: '#6647FF'
            },
            symbol: 'none'
          }
        ]
      },
      option6: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            var result = params[0].name + '<br>'
            params.forEach(function(item) {
              result += item.marker + item.seriesName + ' : ' + item.value + ' 亿</br>'
            })
            return result
          }
        },
        color: ['#18D8B1'],
        xAxis: {

          boundaryGap: false,
          data: [],
          axisLine: {
            lineStyle: {
              color: '#5C6D7C',
              width: 1
            }
          },
          spiltLine: {
            show: true,
            lineStyle: {
              color: '#5C6D7C',
              width: 1
            }
          }
        },
        grid: {
          x2: 22,
          y2: 30
        },
        yAxis: [
          {
            name: '亿',
            nameTextStyle: {
              color: '#ffffff'
            },
            axisLine: {
              lineStyle: {
                color: '#485A6A'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#364C5B'],
                width: 1,
                type: 'solid'
              }
            }
          },
          {
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#485A6A'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#5C6D7C'
              }
            }

          }
        ],
        series: [
          {
            data: [],
            type: 'line',
            name: '全产业链产值',
            areaStyle: { normal: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: 'rgba(24, 216, 177, 1)' },

                  { offset: 1, color: 'rgba(24, 216, 177, 0)' }
                ]
              )
            }},
            lineStyle: {
              color: '#18D8B1'
            },
            symbol: 'none'
          }
        ]
      },
      timer: null
    }
  },
  created() {
    this.timer = getDataAndRefresh(this.getFiveData)
  },
  destroyed() {
    clearInterval(this.timer)
  },
  methods: {
    getFiveData() {
      const year = new Date().getFullYear()
      const data = {
        dataType: 'DATA_TYPE_COUNTY_WIDE_INDUSTRIAL_PLANNING',
        page: 1,
        perPage: 5,
        orderDir: 'desc',
        orderBy: 'dataDate'
        // dateRange: '2017,2021'

      }
      for (let i = 1; i < 7; i++) {
        this[`option${i}`].series[0].data = []
      }
      this.option1.series[1].data = []
      sheepInfo(data).then(res => {
        if (res.status === 0) {
          const datas = res.data.rows

          let xData = []
          xData = datas.reverse().map(item => {
            return item.dataDateStr
          })
          this.option1.series[0].data = datas.map(item => { return item.c_1 })
          this.option1.series[1].data = datas.map(item => { return item.c_2 })
          this.option2.series[0].data = datas.map(item => { return item.c_3 })
          this.option3.series[0].data = datas.map(item => { return item.c_4 })
          this.option4.series[0].data = datas.map(item => { return item.c_5 })
          this.option5.series[0].data = datas.map(item => { return item.c_6 })
          this.option6.series[0].data = datas.map(item => { return item.c_7 })

          for (let i = 1; i < 7; i++) {
            this[`option${i}`].xAxis.data = xData
            this[`option${i}`].isShow = true
          }
        }
      })
    }
  }
}
</script>
<style scoped>
.h-87{
  top: 11.3%;
}
.second-center {
  width: 47.87%;
  height: 100%;
  background-size: 100% 100% !important;
}
.second-sides {
  width: 32.7%;
  height: 100%;
  background-size: 100% 100% !important;
}
.second-center[data-top] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-center[data-bottom] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-sides[data-top] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-sides[data-bottom] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
</style>
